<template>
  <div class="constBox">
      <div class="login">
          <div class="login_right">
            <img src="https://online-edu-test.mfy777.com/img/xbgs.png" alt="">
            <div class="login_right_title">
              管理平台
            </div>
          </div>
          <div class="login_left">
            <div class="login_left_div">
              <div style="width: 400px">
                <div class="login_left_title">
                  欢迎登录
                </div>
                <el-form ref="loginForm" :model="ruleForm" :rules="rules" label-width="0" size="large">
                  <el-form-item prop="account">
                    <el-input v-model="ruleForm.account" prefix-icon="el-icon-user" placeholder="请输入账号">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password" style="margin-bottom: 40px;">
                    <el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" maxlength="15" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" style="width: 100%; background-color: #019E69; border-color: #019E69;" :loading="islogin"  @click="formValidate">{{ $t('login.signIn') }}</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
      </div>
  </div>
<!--    <div class="login_bg">-->
<!--        <div class="login_adv" style="background-image: url(img/auth_banner.jpg);">-->
<!--            <div class="login_adv__title">-->
<!--                <img class="logo" :alt="$CONFIG.APP_NAME" src="img/D2.png" style="width: 90px;">-->
<!--                &lt;!&ndash; <h4>{{ $t('login.slogan') }}</h4>-->
<!--				<p>{{ $t('login.describe') }}</p> &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="login_adv__bottom">-->
<!--                © {{$CONFIG.APP_NAME}} {{$CONFIG.APP_VER}}-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="login_main">-->
<!--            &lt;!&ndash; <div class="login_config">-->
<!--				<el-button :icon="config.theme=='dark'?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configTheme"></el-button>-->
<!--				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">-->
<!--					<el-button circle>-->
<!--						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>-->
<!--					</el-button>-->
<!--					<template #dropdown>-->
<!--						<el-dropdown-menu>-->
<!--							<el-dropdown-item v-for="item in lang" :key="item.value" :command="item" :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>-->
<!--						</el-dropdown-menu>-->
<!--					</template>-->
<!--				</el-dropdown>-->
<!--			</div> &ndash;&gt;-->
<!--            <div class="login-form">-->
<!--                <div class="login-header">-->
<!--                    <div class="logo">-->
<!--                        <img :alt="$CONFIG.APP_NAME" src="img/Logo.png">-->
<!--                        &lt;!&ndash; <label>{{$CONFIG.APP_NAME}}</label> &ndash;&gt;-->
<!--                    </div>-->
<!--                    <h2>机构 - 管理登录</h2>-->
<!--                </div>-->
<!--                <el-form ref="loginForm" :model="ruleForm" :rules="rules" label-width="0" size="large">-->
<!--                    <el-form-item prop="account">-->
<!--                        <el-input v-model="ruleForm.account" prefix-icon="el-icon-user" placeholder="请输入账号">-->
<!--                        </el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item prop="password" style="margin-bottom: 40px;">-->
<!--                        <el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" maxlength="15" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="formValidate">{{ $t('login.signIn') }}</el-button>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->

<!--                &lt;!&ndash; <el-divider>{{ $t('login.signInOther') }}</el-divider>-->

<!--				<div class="login-oauth">-->
<!--					<el-button size="small" type="success" icon="fas fa-dot-circle" circle></el-button>-->
<!--				</div> &ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
    <imgcode @onSubmit="codeVerify" ref="codebox" :show="imgcodeStatus" @onClose="imgcodeStatus = false" />
</template>

<script>
import { defineComponent, ref, defineAsyncComponent } from 'vue'
import Vcode from "vue3-puzzle-vcode"
const imgcode = defineAsyncComponent(() => import('./components/imgcode'));
export default defineComponent({
    components: {
        Vcode,
        imgcode
    },
    data() {
        return {
            userType: 'admin',
            ruleForm: {
                account: "",
                password: "",
                captchaKey: '',
                captchaX: ''
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { max: 30, message: '账号长度最大为30位', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: this.$t('login.PWError'), trigger: 'blur' },
                    { min: 6, max: 15, message: '密码长度为6-15位', trigger: 'blur' },
                ]
            },
            islogin: false,
            imgcodeStatus: false,
            config: {
                lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
                theme: this.$TOOL.data.get('APP_THEME') || 'default'
            },
            lang: [{
                name: '简体中文',
                value: 'zh-cn',
            }, {
                name: 'English',
                value: 'en',
            }, {
                name: '日本語',
                value: 'ja',
            }]
        }
    },
    setup() {
        const codeStatus = ref(false);

        const codeShow = () => {
            codeStatus.value = true;
        };

        const codeClose = () => {
            codeStatus.value = false;
        };

        return {
            codeStatus,
            codeShow,
            codeClose
        };
    },
    watch: {
        'config.theme'(val) {
            document.body.setAttribute('data-theme', val)
            this.$TOOL.data.set("APP_THEME", val);
        },
        'config.lang'(val) {
            this.$i18n.locale = val
            this.$TOOL.data.set("APP_LANG", val);
        }
    },
    created: function () {
        this.$TOOL.data.remove("G_TOKEN")
        this.$TOOL.data.remove("G_USER_INFO")
        this.$TOOL.data.remove("G_MENU")
        this.$TOOL.data.remove("G_PERMISSIONS")
        this.$TOOL.data.remove("grid")
        this.$store.commit("clearViewTags")
        this.$store.commit("clearKeepLive")
        this.$store.commit("clearIframeList")
    },
    methods: {
        async login() {
            try {
                this.islogin = true
                this.$refs.codebox.loading = true
                await this.$API.auth.token.get(this.ruleForm).then(async (token) => {
                    this.islogin = false
                    this.$refs.codebox.loading = false
                    this.imgcodeStatus = false
                    this.$TOOL.data.set("G_TOKEN", token.data.accessToken)
                    //获取个人信息
                    await this.$API.auth.user.get().then(user => {
                      console.log(123123)
                        this.$store.commit('userInfo', user.data)
                        this.$TOOL.data.set("G_USER_INFO", user.data)
                        // this.$TOOL.data.set("B_PERMISSIONS", user.data.permissions)
                        this.$notify.success("登录成功")
                        this.$router.replace({path: this.$CONFIG.DASHBOARD_URL})
                    })
                })
            } catch (error) {
                this.islogin = false
                this.$refs.codebox.loading = false
                this.ruleForm.captchaKey = ''
                this.ruleForm.captchaX = ''
                // if (error.data.error === 502) {
                //     this.imgcodeStatus = true
                // }
            }
        },
        configTheme() {
            this.config.theme = this.config.theme == 'default' ? 'dark' : 'default'
        },
        configLang(command) {
            this.config.lang = command.value
        },
        async formValidate() {
          console.log(123123)
            var validate = await this.$refs.loginForm.validate().catch(() => { })
            if (!validate) { return false }
            // this.imgcodeStatus = true
            this.login()
        },
        // 图形验证码成功
        codeVerify(data) {
            this.ruleForm.captchaKey = data.captchaKey
            this.ruleForm.captchaX = data.captchaX
            this.login()
        }
    }
})
</script>

<style scoped lang='scss'>
.login_bg {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
}
.login_adv {
    width: 33.33333%;
    background-color: #555;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}
.login_adv__title {
    color: #fff;
    padding: 40px;
}
.login_adv__title .logo {
    margin-bottom: 30px;
}
.login_adv__title h4 {
    font-size: 18px;
    font-weight: normal;
}
.login_adv__title p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
}
.login_adv__title div {
    margin-top: 10px;
    display: flex;
    align-items: center;
}
.login_adv__title div span {
    margin-right: 15px;
}
.login_adv__title div i {
    font-size: 40px;
}
.login_adv__title div i.add {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
}
.login_adv__bottom {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: #fff;
    padding: 40px;
    background-image: linear-gradient(transparent, #000);
}

.login_main {
    flex: 1;
    overflow: auto;
    display: flex;
}
.login-form {
    width: 400px;
    margin: auto;
    padding: 20px 0;
}
.login-header {
    margin-bottom: 20px;
}
.login-header .logo {
    display: flex;
    align-items: center;
}
.login-header .logo img {
    //height: 60px;
    height: 90px;
    vertical-align: bottom;
    margin-right: 10px;
    margin-left: 88px;
}
.login-header .logo label {
    font-size: 24px;
}
.login-header h2 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 50px;
}
.login-oauth {
    display: flex;
    justify-content: space-around;
}
.login-form .el-divider {
    margin-top: 40px;
}

.login_config {
    position: absolute;
    top: 20px;
    right: 20px;
}
.el-dropdown-menu__item.selected {
    color: var(--el-color-primary);
}

@media (max-width: 1200px) {
    .login-form {
        width: 340px;
    }
}
@media (max-width: 1000px) {
    .login_main {
        display: block;
    }
    .login-form {
        width: 100%;
        padding: 20px 40px;
    }
    .login_adv {
        display: none;
    }
}
.constBox{
  background: #EFF9EC;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login{
  display: flex;
  height: 560px;
  width: 841px;
  background: #fff;
  border-radius: 10px;
}
.login_left{
  width: 100%;
  height: 100%;
}
.login_right{
  position: relative;
}
.login_left_title{
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 40px;
}
.login_left_div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.login_right_title{
  font-weight: 400;
  color: #fff;
  bottom: 40px;
  left: 40px;
  font-size: 18px;
  position: absolute;
}

</style>
